<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p id="p1" draggable="true">This element is draggable.</p>
<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
<script>
    function dragstart_handler(ev) {
        // Add the target element's id to the data transfer object
        ev.dataTransfer.setData("text/plain", ev.target.id);
    }

    window.addEventListener('DOMContentLoaded', () => {
        // Get the element by id
        const element = document.getElementById("p1");
        // Add the ondragstart event listener
        element.addEventListener("dragstart", dragstart_handler);
    });
</script>

</body>
</html>